<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>Image List Test</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href="../../assets/css/icon/iconfont.css" rel="stylesheet" />
    <link href="../../assets/css/main.css" rel="stylesheet" />
</head>

<body>
    <script src="../../node_modules/three/build/three.js"></script>
    <script src="../../dist/ShadowEditor.js"></script>
    <script>
        var control = UI.create({
            xtype: 'imagelist',
            children: [{
                xtype: 'image',
                src: '../image/girl.jpg',
                title: 'This is girl 1.'
            }, {
                xtype: 'image',
                src: '../image/girl.jpg',
                title: 'This is girl 2.'
            }, {
                xtype: 'image',
                src: '../image/girl.jpg',
                title: 'This is girl 3.'
            }, {
                xtype: 'image',
                src: '../image/girl.jpg',
                title: 'This is girl 4.'
            }, {
                xtype: 'image',
                src: '../image/girl.jpg',
                title: 'This is girl 5.'
            }],
            onClick: (event, index) => {
                UI.msg(`You clicked No. ${index}.`);
            }
        });
        control.render();
    </script>
</body>

</html>